<template>
  <div class="big">
   
    <div v-if="arr.length==0">购物车空空，快去逛街吧</div>
    <input type="checkbox" v-model="allChecked" @change="changeAll" />全选
    <van-swipe-cell v-for="item in arr" :key="item.id">
      <van-card
        :num="item.num"
        :price="item.price"
        desc="描述信息"
        :title="item.goodsname"
        class="goods-card"
        :thumb="$pre+item.img"
      />
      <input type="checkbox" v-model="item.checked" @change="changeOne" />
      <button @click="sub(item.id,item.num)">-</button>
      <button @click="add(item.id)">+</button>
      <template #right>
        <van-button square text="删除" @click="del(item.id)" type="danger" class="delete-button" />
      </template>
    </van-swipe-cell>
    <button @click="toOrder">结算</button>
    <div class="bottom">总价：￥{{allPrice}}</div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { reqShopDel, reqShopEdit, reqShopList } from "../../http/api";
export default {
  data() {
    return {
      arr: [],
      allChecked: false,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      //1.请求购物车list
      reqShopList({
        uid: JSON.parse(localStorage.getItem("user")).uid,
      }).then((res) => {
        //补checked
        let list = res.data.list ? res.data.list : [];
        list.forEach((item) => {
          item.checked = false;
        });
        this.arr = list;
      });
    },
    //2.删除
    del(id) {
      reqShopDel({
        id: id,
      }).then((res) => {
        if (res.data.code == 200) {
          //删除成功
          Toast(res.data.msg);
          //刷新list
          this.init();
        }
      });
    },

    //3.添加
    add(id) {
      reqShopEdit({
        id: id,
        type: 2,
      }).then((res) => {
        if (res.data.code == 200) {
          //操作成功
          Toast(res.data.msg);
          //刷新list
          this.init();
        }
      });
    },
    //4.自减
    sub(id, num) {
      if (num <= 1) {
        Toast("宝贝不能再减少！！！");
        return;
      }
      reqShopEdit({
        id: id,
        type: 1,
      }).then((res) => {
        if (res.data.code == 200) {
          //操作成功
          Toast(res.data.msg);
          //刷新list
          this.init();
        }
      });
    },
    //5.点了全选
    changeAll() {
      this.arr.forEach((item) => {
        item.checked = this.allChecked;
      });
    },
    //6.点了某个选择
    changeOne() {
      this.allChecked = this.arr.every((item) => item.checked);
    },
    //8.结算
    toOrder() {
      // countmoney:总价 countnumber：总数量 idstr：选中的id的字符串 1,2,3
      let str = this.arr.reduce(
        (val, item) => (item.checked ? (val += item.id + ",") : val),
        ""
      );
      let json = {
        countmoney: this.allPrice,
        countnumber: this.arr.reduce(
          (val, item) => (item.checked ? (val += item.num) : val),
          0
        ),
        idstr: str.slice(0, str.length - 1),
      };
      localStorage.setItem("order", JSON.stringify(json));
      this.$router.push("/order?");
    },
  },
  //7.总价
  computed: {
    allPrice() {
      return this.arr.reduce(
        (val, item) => (item.checked ? (val += item.price * item.num) : val),
        0
      );
    },
  },
};
</script>

<style scoped>

.delete-button {
  height: 100%;
}
.bottom{
  margin-bottom:3.2rem;
}
</style>